@import 'common.sass'

.reason-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .title-box
        width: auto
        height: auto
        display: flex
        flex-direction: column
        align-items: center

        .english
            font-size: vw(18)
            color: $content_color

        .chinese
            font-size: vw(32)
            display: flex
            align-items: center
            color: $title_color

    .sub-title-box
        width: auto
        height: auto
        display: flex
        flex-direction: column
        align-items: center

        .chinese
            font-size: vw(28)
            display: flex
            align-items: center
            color: $title_color

    .content-box
        width: vw(700)
        height: auto
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        text-indent: 2em
        color: $title_color
        font-size: vw(24)
        line-height: vw(48)

.type-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .element

        .title-box
            width: auto
            height: auto
            display: flex
            flex-direction: column
            align-items: center

            .english
                font-size: vw(18)
                color: $content_color

            .chinese
                font-size: vw(32)
                display: flex
                align-items: center
                color: $title_color

        .image-box
            width: vw(700)
            height: vw(150)
            display: flex
            flex-direction: column
            align-items: center

        .one
            background-image: url("images/news/reason-1.png")
            background-size: 100% 100%
            background-position: center center
        .two
            background-image: url("images/news/reason-2.png")
            background-size: 100% 100%
            background-position: center center
        .three
            background-image: url("images/news/reason-3.png")
            background-size: 100% 100%
            background-position: center center
        .four
            background-image: url("images/news/reason-4.png")
            background-size: 100% 100%
            background-position: center center
        .five
            background-image: url("images/news/reason-5.png")
            background-size: 100% 100%
            background-position: center center
        .six
            background-image: url("images/news/reason-6.png")
            background-size: 100% 100%
            background-position: center center
        .seven
            background-image: url("images/news/reason-7.png")
            background-size: 100% 100%
            background-position: center center
        .eight
            background-image: url("images/news/reason-8.png")
            background-size: 100% 100%
            background-position: center center

        .content-box
            width: vw(700)
            height: auto
            display: flex
            flex-direction: column
            justify-content: center
            align-items: center
            color: $title_color
            font-size: vw(24)
            line-height: vw(48)

            .line
                width: vw(700)
                height: auto